<template>
	<div>
		<h2>添加用户</h2>
		<table border='1' cellspacing=0>
			<tr>
				<td>昵称：</td>
				<td>
					<input v-model="nickname" type="text" placeholder="请输入昵称">
				</td>
			</tr>
			<tr>
				<td>手机号：</td>
				<td>
					<input v-model="tel" type="text" placeholder="请输入手机号">
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input v-model="pwd" type="password" name="" id="" placeholder="请输入密码"></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="gender" @click="gender('男')">男
					<input type="radio" name="gender" @click="gender('女')">女
				</td>
			</tr>
			<tr>
				<td>是否为管理员：</td>
				<td>
					<input type="radio" name="admin" @click="isAdmin('2')">是
					<input type="radio" name="admin" @click="isAdmin('1')">否
				</td>
			</tr>
			<tr class="add">
				<td colspan="2">
					<el-button @click='upload' type="primary" :style="sty">添加</el-button>
				</td>
			</tr>
		</table>
	</div>
	
	
</template>

<script setup>
	import {getCurrentInstance,ref,reactive,onMounted} from 'vue'			
	let {proxy}=getCurrentInstance()
	
	let nickname = ref('')
	let tel = ref('')
	let pwd = ref('')
	let sex = ref('')
	let admin = ref(null)
	let sty = reactive({
		width: '80px',
		height: '40px',
	})
	// if(!nickname.value || !tel.value || !pwd.value || !sex.value ){
	// 	dis.value = true
	// }else if(nickname.value && tel.value && pwd.value && sex.value){
	// 	dis.value = false
	// }
	let gender = (arg)=>{
		sex.value = arg
	}
	let isAdmin = (arg)=>{
		admin.value = arg
		console.log(admin.value)
	}
	let upload = async()=>{
		console.log(sex.value)
		let res= await proxy.$axios.post("/egg/adduser",{
			nickname:nickname.value,
			tel:tel.value,
			pwd:pwd.value,
			sex:sex.value,
			type:admin.value
		})
		if(res.data.code == -1){
			alert(res.data.data)
		}else{
			alert('添加成功')
		}
		console.log(res)
	}
</script>

<style scoped>
	h2 {
		margin-left: 20px;
	}
	table {
		margin-left: 100px;
	}
	tr>td:nth-of-type(odd) {
		text-align: center;
		width: 150px;
		height: 40px;
	}
	tr>td:nth-of-type(even) {
		text-align: center;
		width: 200px;
		height: 40px;
	}
	input[type='text'],[type='password'] {
		border: none;
		outline: none;
		width: 190px;
		height: 30px;
	}
	.add {
		height: 40px;
	}
</style>